<div class="m-portlet" [ngClass]="{ 'm-portlet--body-progress' : viewLoading, 'm-portlet--body-progress-overlay' : loadingAfterSubmit }">
	<div class="m-portlet__head">
		<div class="m-portlet__head-caption">
			<div class="m-portlet__head-title">
				<span class="m-portlet__head-icon m--hide">
					<i class="la la-gear"></i>
				</span>
				<h3 class="m-portlet__head-text">{{getTitle()}}</h3>
			</div>
		</div>
	</div>
	<form class="m-form" [formGroup]="customerForm">
		<div class="m-portlet__body">

			<div class="m-portlet__body-progress">
				<mat-spinner [diameter]="20"></mat-spinner>
			</div>

			<m-alert *ngIf="hasFormErrors" type="warn" [duration]="30000" [showCloseButton]="true" (close)="onAlertClose($event)">
				Oh snap! Change a few things up and try submitting again.
			</m-alert>

			<div class="form-group m-form__group row">
				<div class="col-lg-4 m--margin-bottom-20-mobile">
					<mat-form-field class="mat-form-field-fluid">
						<input matInput placeholder="Enter First Name" formControlName="firstName" />
						<mat-error>First Name is
							<strong>required</strong>
						</mat-error>
						<mat-hint align="start">Please enter
							<strong>First Name</strong>
						</mat-hint>
					</mat-form-field>
				</div>
				<div class="col-lg-4 m--margin-bottom-20-mobile">
					<mat-form-field class="mat-form-field-fluid">
						<input matInput placeholder="Enter Last Name" formControlName="lastName" />
						<mat-error>Last Name is
							<strong>required</strong>
						</mat-error>
						<mat-hint align="start">Please enter
							<strong>Last Name</strong>
						</mat-hint>
					</mat-form-field>
				</div>
				<div class="col-lg-4 m--margin-bottom-20-mobile">
					<mat-form-field class="mat-form-field-fluid">
						<input matInput placeholder="Enter Login" formControlName="userName" />
						<mat-error>Login is
							<strong>required</strong>
						</mat-error>
						<mat-hint align="start">Please enter
							<strong>Login</strong>
						</mat-hint>
					</mat-form-field>
				</div>
			</div>
			<div class="m-separator m-separator--dashed"></div>
			<div class="form-group m-form__group row">
				<div class="col-lg-4 m--margin-bottom-20-mobile">
					<mat-form-field class="mat-form-field-fluid">
						<input type="email" matInput placeholder="Enter Email" formControlName="email" />
						<mat-error>Email is
							<strong>required</strong>
						</mat-error>
						<mat-hint align="start">Please enter
							<strong>Email</strong>
						</mat-hint>
					</mat-form-field>
				</div>
				<div class="col-lg-4 m--margin-bottom-20-mobile">
					<mat-form-field class="mat-form-field-fluid">
						<input matInput [matDatepicker]="picker" placeholder="Choose a Date of Birth" formControlName="dob" />
						<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
						<mat-datepicker #picker></mat-datepicker>
						<mat-hint align="start">Please enter
							<strong>Date of Birth</strong> in 'mm/dd/yyyy' format</mat-hint>
					</mat-form-field>
				</div>
				<div class="col-lg-4 m--margin-bottom-20-mobile">
					<mat-form-field class="mat-form-field-fluid">
						<input type="email" matInput placeholder="Enter IP Address" formControlName="ipAddress" />
						<mat-error>IP Address
							<strong>required</strong>
						</mat-error>
						<mat-hint align="start">We'll never share customer
							<strong>IP Address</strong> with anyone else</mat-hint>
					</mat-form-field>
				</div>
			</div>
			<div class="m-separator m-separator--dashed"></div>
			<div class="form-group m-form__group row">
				<div class="col-lg-4 m--margin-bottom-20-mobile">
					<mat-form-field class="mat-form-field-fluid">
						<mat-select placeholder="Gender" formControlName="gender">
							<mat-option value="Female">Female</mat-option>
							<mat-option value="Male">Male</mat-option>
						</mat-select>
						<mat-hint align="start">
							<strong>Gender</strong>
						</mat-hint>
					</mat-form-field>
				</div>
				<div class="col-lg-4 m--margin-bottom-20-mobile">
					<mat-form-field class="mat-form-field-fluid">
						<mat-select placeholder="Type" formControlName="type">
							<mat-option value="0">Business</mat-option>
							<mat-option value="1">Individual</mat-option>
						</mat-select>
						<mat-hint align="start">
							<strong>Account Type</strong>
						</mat-hint>
					</mat-form-field>
				</div>
			</div>
		</div>
		<div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
			<div class="m-form__actions m-form__actions--solid">
				<div class="row text-right">
					<div class="col-lg-12">
						<button type="button" mat-raised-button [mat-dialog-close]="data.animal" cdkFocusInitial matTooltip="Cancel changes">
							Cancel
						</button>&nbsp;
						<button type="button" mat-raised-button color="primary" (click)="onSubmit()" [disabled]="viewLoading" matTooltip="Save changes">
							Save
						</button>
					</div>
				</div>
			</div>
		</div>
	</form>
</div>